<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-r">
        <el-form
          ref="ruleFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          auto-complete="on"
          label-position="left"
        >
          <div class="title-container">
            <h3 class="title">智管码</h3>
            <h4 class="ftitle">企业后台</h4>
            <span></span>
          </div>
          <el-form-item prop="account">
            <el-input
              ref="account"
              prefix-icon="User"
              size="large"
              v-model="loginForm.account"
              @keyup.enter.native="handleLogin(ruleFormRef)"
              placeholder="请输入账号"
              name="account"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :key="passwordType"
              ref="password"
              size="large"
              prefix-icon="Lock"
              v-model="loginForm.password"
              :type="passwordType"
              show-password
              @keyup.enter.native="handleLogin(ruleFormRef)"
              placeholder="请输入密码"
              name="password"
              tabindex="2"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="code" style="margin-bottom:10px" class="verifyCodeItemCss">
            <Verify @failed="failed" @success="success" ref="verify"></Verify>
          </el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            size="large"
            style="width: 100%; margin-bottom: 30px"
            @click.native.prevent="handleLogin(ruleFormRef)"
            >登录</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import Verify from "@/components/Slied.vue";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import useCurrentInstance from "@/utils/useCurrentInstance";
const { proxy } = useCurrentInstance()

const ruleFormRef = ref()
const verify = ref()
const store = useStore();
let router = useRouter();

  let loginForm = reactive({
    account: "",
    password: "",
  })
  let loginRules = {
    account: [
      { required: true, trigger: "blur", message:"账号不能为空"},
    ],
    password: [
      { required: true, trigger: "blur", message:"密码不能为空" },
    ]
  }
  let loading = ref(false)
  let passwordType = "password"
  let iftrue = false

  const handleLogin = async(formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        if(iftrue){
          store.dispatch("user/login", loginForm).then((res) => {
            router.push({name:'staff'})
          }).catch(()=>{loading.value = false, verify.value.initRange()})
        }else{
          proxy.$message({
            type:'warning',
            message:'请完成滑块验证'
          })
        }
      }else{
        verify.value.initRange()
      }
    })
  }
  // 滑块验证
  const failed = (e) => {
    iftrue = false
  }
  const success = (e) => {
    iftrue = true
  }
</script>


<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background: url("../../assets/img/login_bg.png") 0 0 no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  .login-box{
    height: 500px;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -250px 0 0 -200px;
    .login-l{
      width:400px;
      height: 100%;
      background: url("../../assets/img/login_bg1.png") 0 0 no-repeat;
      background-size: cover;
      padding: 60px 30px;
      box-sizing: border-box;
      h3{
        font-size: 26px;
        color: #333;
        margin: 0;
        display: flex;
        align-items: center;
        float: left;
        .line{
          width: 3px;
          height: 20px;
          background: #1890FF;
          border-radius: 2px;
          margin-right: 10px;
        }
      }
      p{
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
    .login-r{
      width:400px;
      background: #ffffff8e;
      border-radius: 10px;
      box-shadow: 11px 10px 15px 1px #00000084;
    }
  }

  .login-form {
    position: relative;
    padding: 60px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    i{
      font-size: 18px;
    }
  }

  .title-container {
    position: relative;
    margin: 0px auto 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      font-size: 40px;
      color: #4c4c4c;
      margin: 0;
      text-align: center;
      font-weight: bold;
    }
    .ftitle{
      color: #9e9e9e;
      margin: 5px 0;
    }
    span{
      width: 47px;
      height: 2px;
      background: #1890FF;
      border-radius: 1px;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}

.verifyCodeItemCss{
  width: 100%;
}
</style>
